<template>
    <div class="today-recommend">
      <div class="py-container">
        <ul class="recommend" @click="goSearch">
          <li class="clock">
            <div class="time">
              
              <img src="./images/clock.png" />
              <h3>极速秒杀
                
              </h3>
              <h3 class="text_1">
                <span class="hour">1</span> <strong>:</strong>
        <span class="minute">2</span> <strong>:</strong>
        <span class="second">3</span>

              </h3>
              
              
            </div>
          </li>
          <li
            class="banner"
            v-for="(recommend) in List"
            :key="recommend.id"
          >
            <img :src="recommend.imgUrl" :data-recommendName="recommend.title" />
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
   
  import { mapState } from "vuex";
  export default {
    name: "MyRecommend",
    created(){
      
            
    },
    mounted() {
      this.$store.dispatch("getrecommendList");
      var hour = document.querySelector(".hour");
        var minute = document.querySelector(".minute");
        var second = document.querySelector(".second");
        //获取截止时间的时间戳（单位毫秒）
        var inputTime = +new Date("2023-08-13 10:00:00");
        
        //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
        countDown();
        //定时器 每隔一秒变化一次
        setInterval(countDown, 1000);
        function countDown() {
            //获取当前时间的时间戳（单位毫秒）
            var nowTime = +new Date();
            //把剩余时间毫秒数转化为秒
            var times = (inputTime - nowTime) / 1000;
            //计算小时数 转化为整数
            var h = parseInt(times / 60 / 60 % 24);
            //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
            hour.innerHTML = h < 10 ? "0" + h : h;
            //计算分钟数 转化为整数
            var m = parseInt(times / 60 % 60);
            //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            minute.innerHTML = m < 10 ? "0" + m : m;
            //计算描述 转化为整数
            var s = parseInt(times % 60);
            //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            second.innerHTML = s < 10 ? "0" + s : s;}
    },
    computed: {
      // mapState也可通过调用state中的属性并指定
      ...mapState({
        List: (state) => state.home.getrecommendlist,
      }),
    },
    methods: {
      goSearch(event) {
        let element = event.target;
        let { recommendname } = element.dataset;
        if (recommendname) {
          let location = {
            name: "Search",
          };
          let query = {
            keyword: recommendname,
          };
          if (this.$route.params) {
            location.query = query;
            location.params = this.$route.params;
            this.$router.push(location);
          }
        }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .today-recommend {
    .py-container {
      width: 1200px;
      margin: 30px auto;
  
      .recommend {
        height: 260px;
        background-color: #eaeaea;
        margin: 10px 0;
        display: flex;
  
        .clock {
          width: 203.33px;
          background-color: #eaeaea;
          color: #fff;
          font-size: 18px;
          text-align: center;
  
          .time img {
            height: 260px;
  
            margin-right: 15px;
          }
          
          h3 {
            margin: -90px 0;
            font-weight: 700;
            font-size: 28px;
            line-height: 30.06px;
          }
          .text_1{
            margin: -189px 0;
          }
          .hour,
        .minute,
        .second {
         
        //   margin: -128px 0;
          width: 20px;
          height: 20px;
       
          font-weight: 700;
          font-size: 28px;
          line-height: 30.06px;
        
        }
          
        }
  
        .banner {
          width: 20.83%;
  
          img {
            width: 85%;
            height: 260px;
            transition: all 400ms;
  
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  </style>
  